<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/12/13
  Time: 20:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<el-card>
    <el-row style="width: 100%">

        <el-col :md="{span:8,offset:16}" style="margin-bottom: 5px">
            <el-input
                    v-model="meter.search"
                    placeholder="请输入信用卡卡号"
                    style="width: 100%"
            >
                <template #append>
                    <el-button @click="loadMeter(1)">
                        <el-icon>
                            <i class="fa fa-search"></i>
                        </el-icon>
                    </el-button>
                </template>
            </el-input>
        </el-col>
    </el-row>
    <el-table :data="meter.tableDatas" style="width: 100%">
        <el-table-column prop="cardId" label="信用卡ID"></el-table-column>
        <el-table-column prop="cardNumId" label="信用卡卡号"></el-table-column>
        <el-table-column prop="cardPrice" label="代还款金额"></el-table-column>
        <el-table-column prop="cardTime" label="还款日期"></el-table-column>
        <el-table-column prop="bankName" label="银行名称"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
            <template #default="scope">
                <el-button size="mini" type="success" @click="updateCreditCardState(scope.row.cardId)"
                >标记还款
                </el-button
                >
            </template>
        </el-table-column>
    </el-table>
    <el-pagination style="text-align: center" :page-size="10" :total="meter.itemsCount" @current-change="tabMeterPage"
                   layout="prev, pager, next"></el-pagination>
</el-card>
